<!doctype html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Welcome</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/new-style.css" rel="stylesheet">
    <link href="css/progress_bar.css" rel="stylesheet">
    <script src="js/authority/html5shiv.min.js" ></script>
    <script src="js/authority/respond.min.js"></script>
    <script src="js/authority/jquery.min.js"></script>
    <script src="js/authority/bootstrap.min.js"></script>

</head>
<!--<body style="background: url('img/Ybackground.png')  center fixed; background-size: cover;">-->
<body style="background-image: url('/Ybackground.png'); background-size: cover;">

<div class="container-fluid">
    <div class="row new-title">
        <div class="col-md-2">
            <h4 class="text-center" id="datetime">
            <script>
                setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
            </script>
            </h4>
            <h4 class="text-center">
                当前用户 : <span th:text="${session.userManagement.userName}"></span>
                <span th:text="${session.userManagement.roleId}" id="roleIdVal" hidden></span>
<!--                当前用户:肖亮-->
            </h4>
        </div>
        <div class="col-md-8">
            <h1 class="text-center">巡航机器人监控系统</h1>
        </div>
        <div class="col-md-2"><img alt="#" class="img-responsive center-block top-logo" src="/Wlogo.png"></div>
    </div>
</div>

<div class="new-content">
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-6 new-show">
                    <div class="jumbotron new-icon" id="R10">
                        <h5 class="text-center new-show-p">设备温度</h5>
                        <img src="/Temperature/Temperature22.png" alt="#" class="center-block" height="150%">
                        <p class="text-center" id="deviceTmp">43℃</p>
                    </div>
                    <div class="jumbotron new-icon" id="R11">
                        <!--                        实时功率-->
                        <div class="panel-body">
                            <div id="container" style="height: 100%;margin-top: -40px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 new-show" >
                    <div class="jumbotron new-icon" id="R12">
                        <h5 class="text-center new-show-p">剩余电量</h5>
                        <img alt="waiting..." class="center-block" height="150%" id="restElecImg">
                        <p class="text-center" id="restElec"></p>
                    </div>
                    <div class="jumbotron new-icon" id="R13">
                        <!--                        运行速度-->
                        <div class="panel-body">
                            <div id="container3" style="height: 100%;margin-top: -40px;"></div>
                        </div>
                    </div>
                    <div class="jumbotron new-icon" id="R14" style="display: none">
                        <!--                        电池电压-->
                        <h5 class="text-center new-show-p">电池电压</h5>
                        <img src="/voltage.png" alt="waiting..." class="center-block" height="150%" id="eleTenValImg">
                        <p class="text-center" id="eleTenVal"></p>
                    </div>
                </div>
            </div>
            <div class="alert alert-success new-alert" role="alert">
                通讯状态：<strong>&nbsp;正常</strong>
            </div>
            <div class="alert alert-danger new-alert" role="alert">
                工作状态：<strong>&nbsp;正常</strong>
            </div>
            <div id="manControl">
                <button type="button" class="btn btn-primary btn-block " id="autoTest">自动巡检</button>
                <button type="button" class="btn btn-default  btn-block new-alert2" id="manTest">手动巡检</button>
                <button type="button" class="btn btn-default btn-block new-alert2" id="stopTest">停机</button>
            </div>
        </div>
        <div class="col-md-4">
<!--            <video autoplay class="center-block" controls="controls" height="560px"-->
<!--                   loop="loop" muted="muted" id="video"-->
<!--                   style="object-fit:fill;text-align: center;margin-top: 20px" width="420px"></video>-->

            <canvas id="video"></canvas>
            <script type="text/javascript" src="js/jsmpeg.min.js"></script>
            <script type="text/javascript">
                var canvas = document.getElementById('video');
                var url = 'ws://127.0.0.1:8080/aa';
                var player = new JSMpeg.Player(url, {canvas: canvas});

            </script>


<!--            <video src="http://localhost:9527" type="video/ogg" id="myCamera" autoplay muted width="420px" height="560px"></video>-->
        </div>
        <div class="col-md-4">
            <video autoplay id="video2" class="center-block" controls="controls" height="270px"
                   loop="loop" muted="muted"
                   style="object-fit:fill;text-align: center;margin-top: 20px" width="430px"></video>
            <video autoplay class="center-block" controls="controls" height="270px"
                   loop="loop" muted="muted" id="video3"
                   style="object-fit:fill;text-align: center;margin-top: 20px" width="430px"></video>
        </div>

        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalPic" id="modalShow" style="display: none">
            检测结果
        </button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModalPic" tabindex="-1" role="dialog" aria-labelledby="myModalPicLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalPicLabel">
                            有裂痕
                        </h4>
                    </div>
                    <div class="modal-body">
                        <img id="imgCanvs">
                        <video id="videoContainer" autoplay controls style="width: 128px;display: none"></video>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="col-md-2">
            <div class="row">
                <div class="col-md-6 new-show">
                    <div class="jumbotron new-icon">
                        <h5 class="text-center new-show-p">甲烷浓度</h5>
                        <img alt="waiting..." class="center-block" height="150%" id="methValImg">
                        <p class="text-center" id="methVal"></p>
                    </div>
                    <div class="jumbotron new-icon">
                        <h5 class="text-center new-show-p">氧气浓度</h5>
                        <img alt="waiting..." class="center-block" height="150%" id="oxyValImg">
                        <p class="text-center" id="oxyVal"></p>
                    </div>
                    <div class="jumbotron new-icon">
                        <!--                当前风速-->
                        <div class="panel-body">
                            <div id="container8" style="height: 100%;margin-top: -40px;"></div>
                        </div>
                    </div>
                    <div class="jumbotron new-icon">
                        <h5 class="text-center new-show-p">当前湿度</h5>
                        <img alt="waiting..." class="center-block" height="150%" id="humValImg">
                        <p class="text-center" id="humVal"></p>
                    </div>
                </div>
                <div class="col-md-6 new-show">
                    <div class="jumbotron new-icon">
                        <!--                机头机尾：-->
                        <h5 class="text-center new-show-p">电机温度</h5>
                        <img src="/Temperature/Temperature23.png" alt="#" class="center-block" height="150%">
                        <p class="text-center" id="powerVal"></p>
                    </div>
                    <div class="jumbotron new-icon">
                        <h5 class="text-center new-show-p">轴承温度</h5>
                        <img src="/Temperature/Temperature23.png" alt="#" class="center-block" height="150%">
                        <p class="text-center" id="axleVal"></p>
                    </div>
                    <div class="jumbotron new-icon">
                        <!--                电机输出-->
        <!--                <div class="panel-body">-->
        <!--                    <div id="container6" style="height: 100%;margin-top: -40px;"></div>-->
        <!--                </div>-->
                            <h5 class="text-center new-show-p">减速机输出</h5>
                            <img src="/voltage.png" alt="#" class="center-block" height="150%" id="volValImg">
                            <p class="text-center" id="volVal"></p>
                    </div>
                    <div class="jumbotron new-icon">
                        <!--                轴承震动：-->
                        <div class="panel-body">
                            <div id="container7" style="height: 100%;margin-top: -40px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="new-content" style="margin-top: 18px">
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-lg-4">
                    <a href="/UserManagement.html" class="btn btn-primary btn-lg active center-block" role="button"
                       style="font-size: 15px;width: 115%;height: 100%" id="adminShowMana" name="adminShow">用户<br/>管理</a>
                </div>
                <div class="col-lg-4">
                    <a href="/LogManagement.html" class="btn btn-primary btn-lg active center-block" role="button"
                       style="font-size: 15px;width: 115%;height: 100%" id="adminShowRec" name="adminShow">日志<br/>管理</a>
                </div>
<!--                <div class="col-lg-4">-->
<!--                    <a href="#" class="btn btn-primary btn-lg active center-block" role="button"-->
<!--                       style="font-size: 15px;width: 115%;height: 100%" id="adminShowArg" name="adminShow">参数<br/>管理</a>-->
<!--                </div>-->
                <div class="col-lg-4">
                    <a href="#" class="btn btn-primary btn-lg active center-block" data-toggle="modal" data-target="#myModal" role="button"
                       style="font-size: 15px;width: 115%;height: 100% ;background-color: #286090;">参数<br/>显示</a>
                </div>
            </div>
        </div>
<!--        <div class="col-md-1">-->
<!--            <div class="dropup">-->
<!--                <a href="#" class="btn btn-primary btn-lg active center-block" data-toggle="modal" data-target="#myModal" role="button"-->
<!--                   style="font-size: 15px;width: 115%;height: 100% ;background-color: #286090;">参数<br/>显示</a>-->
<!--            </div>-->
<!--        </div>-->
        <div class="col-md-4" name="adminShow">
            <div class="nav nav-pills thumbnail center-block"
                 style="height: 56px;background-color: #337ab7;border: 0px;width: 80%">
                <div style="float: left;margin-top: 2px;border: 0px">
                    <span class="new-title" style="font-size: 15px;margin-left: 10px;margin-right: 10px">行走方向：</span>
                    <img src="/上箭头.png" id="upArrow" height="40px;" style="margin-top: 2px;cursor:pointer" title="W" alt="#">
                    <img src="/下箭头.png" id="downArrow" height="40px" style="margin-left: 10px;margin-top: -5px;cursor:pointer" title="S" alt="#">
                    <img src="/左箭头.png" id="leftArrow" height="40px" style="margin-left: 10px;cursor:pointer" title="A" alt="#">
                    <img src="/右箭头.png" id="rightArrow" height="40px" style="margin-left: 10px;cursor:pointer" title="D" alt="#">
                </div>
            </div>
        </div>

        <div class="col-md-4" style="margin-top: 10px;" name="adminShow">
            <p class="new-title" style="font-size: 15px;margin-top: -10px">机器人控制：<span id="text_xa_">25%</span></p>
            <div id="box_">
                <div id="bg_">
                    <div id="bgcolor_"></div>
                </div>
                <div id="bt_"></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="row">
                <div class="col-lg-4">
                    <a href="/RobotManagement.html" class="btn btn-primary btn-lg active center-block" role="button"
                       style="font-size: 15px;width: 115%;height: 100%" id="adminShowRob" name="adminShow">机器<br/>管理</a>
                </div>
                <div class="col-lg-4">
                    <a href="/InspectionManagement.html" class="btn btn-primary btn-lg active center-block" role="button"
                       style="font-size: 15px;width: 115%;height: 100%" id="adminShowChk" name="adminShow">巡检<br/>管理</a>
                </div>
                <div class="col-lg-4">
                    <a href="/index.html" class="btn btn-primary btn-lg active center-block" role="button"
                       style="font-size: 15px;width: 115%;height: 100%">退出<br/>登录</a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">参数显示</h4>
            </div>
            <div class="modal-body">
                <div class="thumbnail">
                    <div class="caption">
                        <p>机器人信息管理</p>
                        <label class="checkbox-inline">
                            <input type="checkbox"  checked="checked" name="inlineCheckbox"> 设备温度
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" checked="checked" name="inlineCheckbox"> 剩余电量
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" checked="checked" name="inlineCheckbox"> 实时功率
                        </label>
                        <label class="checkbox-inline">
                        <input type="checkbox" checked="checked" name="inlineCheckbox"> 运行速度
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="inlineCheckbox"> 电池电压
                        </label>
                    </div>
                </div>
                <div class="thumbnail">
                    <div class="caption">
                        <p>环境参数管理</p>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2-1" value="option1"> 当前温度
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2-2" value="option2"> 当前电量
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2-3" value="option3"> 实时功率
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2-4" value="option3"> 运行速度
                        </label>

                    </div>
                </div>
                <div class="thumbnail">
                    <div class="caption">
                        <p>设备参数管理</p>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3-1" value="option1"> 设备温度
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3-2" value="option2"> 剩余电量
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3-3" value="option3"> 实时功率
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3-4" value="option3"> 运行速度
                        </label>
                    </div>
                </div>
                <input class="form-control" id="disabledInput" type="text" placeholder="注：每项参数限选4项" disabled>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="ROK" data-dismiss="modal">保存修改</button>
            </div>
        </div>
    </div>
</div>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="js/varArgument.js" type="text/javascript"></script>
<!--机器人图标-->
<script type="text/javascript" src="js/thermometer.js"></script>
<!--环境参数-->
<script type="text/javascript" src="js/thermometer2.js"></script>
<!--设备参数-->
<script type="text/javascript" src="js/thermometer3.js"></script>
<script type="text/javascript" src="js/ptz.js"></script>
</body>
</html>